<template>
  <div class="particulars-banner">
    <el-header style="font-size: 20px; font-weight: bold">
      <i class="el-icon-s-tools" style="margin-right: 15px"></i>
      <span>漏洞分析</span>
    </el-header>
    <div style="margin: 5px 0px 0px 20px" class="tag-group" >
      <el-form :inline="true" ref="form">
        <el-form-item label="漏洞查询" >
          <el-input style="margin: 0px 40px 0px 10px; " v-model="vuln" placeholder="漏洞名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 20px;" type="primary" v-on:click="register">确认</el-button>
        </el-form-item>
      </el-form>
      <el-tag
        effect="dark"
        v-if = "tableData=='暂不支持查询此漏洞详情'"
        style="margin-right: 5px"
      >
        {{ tableData }}
      </el-tag>
    </div>
    <br>
    <div class="text" v-if = "tableData != '暂不支持查询此漏洞详情' && vuln_name" style="margin: 20px">
      <div class="text-header" style="border-bottom: 2px solid red">
        <i class="el-icon-arrow-up" style="margin-right: 15px"></i>
        <span style="font-weight: bold; color: #777777">漏洞级别</span>
      </div>
      <p>{{ tableData[0].vuln_level }}</p>

      <div class="text-header" style="border-bottom: 2px solid red">
        <i class="el-icon-arrow-up" style="margin-right: 15px"></i>
        <span style="font-weight: bold; color: #777777">漏洞描述</span>
      </div>
      <p>{{ tableData[0].vuln_describe }}</p>

      <div class="text-header" style="border-bottom: 2px solid red">
        <i class="el-icon-arrow-up" style="margin-right: 15px"></i>
        <span style="font-weight: bold; color: #777777">漏洞影响</span>
      </div>
      <p>{{ tableData[0].vuln_influenece }}</p>

      <div class="text-header" style="border-bottom: 2px solid red">
        <i class="el-icon-arrow-up" style="margin-right: 15px"></i>
        <span style="font-weight: bold; color: #777777">漏洞修复方案</span>
      </div>
      <p>{{ tableData[0].vuln_fix }}</p>

      <br>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
     data() {
      return {
        vuln : '',
        vuln_name : '',
        tableData : '',
      }
    },
  methods: {
    register:function() {
      this.vuln_name = this.vuln
      axios.post('http://localhost:5000/vuln_analy',{'vuln': this.vuln})
        .then((response) => {
          const result = response.data
          this.tableData = result.tableData
          console.log(this.tableData)
        })
        .catch((error) => {
          console.log(error)
        })
    }
  },
}
</script>

<style lang="scss" scoped>
.particulars-banner {
  margin: 0.3%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-header {
  background-color: rgba(51, 48, 51, 0.219);
  color: #333;
  line-height: 60px;
  margin-bottom: 20px;
}

li {
  margin: 5px 0px 0px -40px;
}
</style>
